<template>
  <div class="index-wrap">
    <div class="container">
      <div class="swiper-box">
        <div class="side-navigation-bar">
          <ul>
            <li class="side-list">
              <a href="">手机电话卡</a>
              <div class="children">
                <ul>
                  <li v-for="(item,index) in menuList" :key="index">
                    <div v-for="items in item" :key="items.id">
                      <div class="img-wrap">
                        <img :src="items.img" alt="">
                      </div>
                      <div class="name">{{items.name}}</div>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li class="side-list"><a href="">手机电话卡</a></li>
            <li class="side-list"><a href="">手机电话卡</a></li>
            <li class="side-list"><a href="">手机电话卡</a></li>
            <li class="side-list"><a href="">手机电话卡</a></li>
            <li class="side-list"><a href="">手机电话卡</a></li>
            <li class="side-list"><a href="">手机电话卡</a></li>
            <li class="side-list"><a href="">手机电话卡</a></li>
          </ul>
        </div>
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="item in slideList" :key="item.id">
            <img :src="item.img" alt="">
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
<!--      广告位-->
      <div class="abs-box">
        <router-link
            v-for="item in adsList"
            :key="item.id"
            :to="'/product/'+ item.id"
            tag="a"
        >
          <img :src="item.img" alt="">
        </router-link>
      </div>

      <div class="banner">
        <img src="/imgs/banner-1.png" alt="">
      </div>
    </div>

    <div class="product-box">
      <div class="container">
        <h2>手机</h2>
        <div class="wrapper">
          <div class="wrap-left">
            <router-link tag="a" :to="'/product' + 35">
              <img src="/imgs/mix-alpha.jpg" alt="">
            </router-link>
          </div>
          <div class="wrap-right">
            <div class="list" v-for="(item,index) in phoneList"  :key="index">
              <div class="item-wrapper" v-for="(items,index1) in item" :key="items.id">
                <div class="normal" :class="{'title':index1%2===0}"></div>
                <img :src="items.mainImage" alt="">
                <div class="item-name">
                  <p>{{items.name}}</p>
                  <span>{{items.subtitle}}</span>
                </div>
                <div class="item-price" @click="openModal">
                  {{items.price}}元
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <service-bar/>
    <modal title="提示"  btnType = "1" sureText="查看购物车" :showModal="showModal" @shutModal="shutModal">
      <template v-slot:body>
        <p>商品添加成功!</p>
      </template>
    </modal>
<!--    <router-view/>-->
  </div>
</template>

<script>
import ServiceBar from "@/components/ServiceBar/servicebar";
import Modal from '@/components/Modal/modal';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
export default {
name: "index",
  data(){
  return{
    phoneList:[],
    adsList:[
      {
        id:33,
        img:'imgs/ads/ads-1.png'
      },{
        id:48,
        img:'imgs/ads/ads-2.jpg'
      },{
        id:45,
        img:'imgs/ads/ads-3.png'
      },{
        id:47,
        img:'imgs/ads/ads-4.jpg'
      }
    ],
    slideList:[
      {
        id:'42',
        img:'imgs/slider/slide-1.jpg'
      },
      {
        id:'45',
        img:'imgs/slider/slide-2.jpg'
      },
      {
        id:'46',
        img:'imgs/slider/slide-3.jpg'
      },
      {
        id:'',
        img:'imgs/slider/slide-4.jpg'
      },
      {
        id:'',
        img:'imgs/slider/slide-1.jpg'
      }
    ],
    menuList:[
      [
        {
          id:30,
          img:'imgs/item-box-1.png',
          name:'小米CC9',
        },{
        id:31,
        img:'imgs/item-box-2.png',
        name:'小米8青春版',
      },{
        id:32,
        img:'imgs/item-box-3.jpg',
        name:'Redmi K20 Pro',
      },{
        id:33,
        img:'imgs/item-box-4.jpg',
        name:'移动4G专区',
      }
      ],
      [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]
    ],
    swiperOptions:{
      pagination: {
        el: '.swiper-pagination'
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      loop:true,
      effect:"cube",
      autoplay:true
    },
    showModal:false
  }
  },
  methods:{
    getInit(){
      this.axios.get('/products',{
        params:{
          categoryId:100012,
          pageSize:14
        }
      }).then(res=>{
        res.list = res.list.splice(6,14);
        this.phoneList = [res.list.slice(0,4),res.list.slice(4,8)]
      })
    },
    openModal(){
      this.showModal=true
    },
    shutModal(){
      this.showModal = false
    }
  },
  components:{
    ServiceBar,
    Swiper,
    SwiperSlide,
    Modal
  },
  created() {
    this.getInit()
  },
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/reset.scss";
@import "src/assets/scss/base.scss";
@import "src/assets/scss/mixin.scss";
@import "src/assets/scss/config.scss";
.index-wrap{
  .container{
    .swiper-box{
      position: relative;
      .side-navigation-bar{
        position: absolute;
        top:0;
        left: 0;
        width: 264px;
        height: 451px;
        padding:26px 0;
        box-sizing: border-box;
        z-index: 99;
        background-color:#55585a7a;
        .side-list{
          height: 50px;
          line-height: 50px;
          a{
            position: relative;
            display: block;
            font-size: 16px;
            padding-left: 30px;
            color: #ffffff;
            &:after{
              position: absolute;
              right: 20px;
              top:15px;
              content: '';
              display: block;
              width: 10px;
              height: 10px;
              border-top:3px solid #ffffff;
              border-right: 3px solid #ffffff;
              transform: rotate(45deg);
            }
          }
          &:hover{
            background-color: #FF6600;
            .children{
              display: block;
            }
          }
          .children{
            display: none;
            position: absolute;
            left: 264px;
            top:0;
            width: 863px;
            height: 451px;
            background-color: #ffffff;
            li{
              display: flex;
              cursor: pointer;
              div{
                display: inline-block;
                width: 215px;
                height: 75px;
                .img-wrap{
                  display: inline-block;
                  width:42px;
                  height:35px;
                  padding-left: 17px;
                  vertical-align:middle;
                  box-sizing: border-box;
                  img{
                    width:42px;
                    height:35px;
                    //vertical-align:middle;
                  }
                }
                .name{
                  display: inline-block;
                  width: 100px;
                  line-height: 75px;
                  color:$colorB;
                  font-size:14px;
                }
              }
            }
          }
        }
      }
      .swiper-container{
        height: 451px;
        img{
          width: 100%;
          height: 100%;
        }
        .swiper-button-prev{
          margin-left: 264px;
        }
      }
    }
    .abs-box{
      @include flex();
      margin-top: 14px;
      margin-bottom: 30px;
      a{
        height: 167px;
        img{
          width: 100%;
          height: 100%;
          //height: 167px;
          object-fit: contain;
        }
      }
    }
    .banner{
      height: 130px;
      margin-bottom: 50px;
      img{
        width: 100%;
        height: 130px;
      }
    }
  }
  .product-box{
    background-color: #F5F5F5;
    padding:30px 0 50px;
    .container{
      h2{
        font-size: 22px;
        height: 21px;
        line-height: 21px;
        color: #333333;
        margin-bottom: 20px;
      }
      .wrapper{
        @include flex();
        .wrap-left{
          margin-right: 21px;
          img{
            width: 224px;
            height: 619px;
          }
        }
        .wrap-right {
          .list {
            width: 986px;
            @include flex();

            .item-wrapper {
              width: 236px;
              height: 302px;
              background-color: #ffffff;
              text-align: center;
              .title{
                color: #ffffff;
                background-color: #7ECF68;
                &:after{
                  display: block;
                  content: '新品';
                }
              }
              .normal{
                margin:0 auto;
                width: 67px;
                height: 24px;
                line-height: 24px;
                font-size: 14px;
              }
              img{
                width: 100%;
                height: 195px;
              }
              .item-name{
                p{
                  font-size: 14px;
                  font-weight: bold;
                }
                span{
                  display: inline-block;
                  color: #999999;
                  font-size: 12px;
                  line-height: 13px;
                  margin-top: 6px;
                  margin-bottom: 13px;
                }
              }
              .item-price{
                color: #F20A0A;
                font-size: $fontJ;
                font-weight: bold;
                cursor: pointer;
                &:after{
                  content: '';
                  margin-left: 5px;
                  vertical-align: middle;
                  @include bgImg(22px,22px,'/imgs/icon-cart-hover.png')
                }
              }
            }
            &:first-child {
              margin-bottom: 14px;
            }
          }

        }
      }
    }
  }
}

</style>
